<template>
	<div class="after-sale bg-f5">
        <van-list
            v-model="loading"
            :finished="finished"
            @load="loadData"
            :offset='100'
        >
            <van-cell
                    v-for="(item,index) in data"
                    :key="index"
                    class="border-b20"
              >
                <div class="layout pt15 pb15">
                    <h3 class="fs14 c333">订单号:{{ item.order_no }}</h3>
                    <span class="fs14 subject" v-if="item.status == 1">审核中</span>
                    <span class="fs14 subject" v-if="item.status == 2">售后中</span>
                    <span class="fs14 c333" v-if="item.status == 3">拒绝换货</span>
                    <span class="fs14 c333" v-if="item.status == 4">处理中</span>
                    <span class="fs14 subject" v-if="item.status == 5">退货中</span>
                </div>
                <div class="pt20 pb20 border-t border-b layout-juscon">
                    <img class="mr15" :src="item.goods_picture" alt="" style="width:100px;height:85px;">           
                    <div class="flex_1">
                        <p class="fs16 black ellipsis" style="width: 13rem;">{{ item.goods_name }}</p>
                        <p class="c999 fs12">规格：{{ item.sku_name }}</p>
                        <strong class="subject fs16"><span class="fs14">￥</span>{{ item.price }}</strong>
                    </div>
                </div>
                <div class="layout pt10 pb10">
                    <span class="fs14 c999">{{ item.created_at }}</span>
                    <router-link tag="button" :to="'/personal/order/after-detail?id=' + item.order_item_id" class="border pt5 pb5 pl10 pr10 fs14 subject radius" style="border-color:#ea2000;">售后详情</router-link>
                    <!-- <button class="border pt5 pb5 pl10 pr10 fs14 c333 radius" style="border-color:#333;">售后详情</button> -->
                </div>
            </van-cell>
        </van-list>
	</div>
</template>

<script>
    import { List } from 'vant';
	export default{
        components: {
            List
        },
		data()
		{
			return{
                data        : [],
                loading     : false,
                finished    : false,
                page        : 1,
			}
		},
        created()
        {
            this.loadData();
        },
		methods:
		{
            loadData()
            {
                this.loading = true;
                let params = {
                    limit  : 20,
                    page   : this.page++
                }
                this.$http.get('/order/saleAfter',{ params : params }).then(res => { 
                    if(res.data.list.length){
                        this.data = this.data.concat(res.data.list);
                        this.loading = false;
                    }
                    if(res.data.list.length < params.limit){
                        this.finished = true;
                    }
                })
            }
		}
	}
</script>

<style lang="less">
	.after-sale{

	}
</style>
